<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this绑定的apply-call-bind函数说明(Explanation of the apply call bind function bound to this)</title>
  <!-- 
  在JavaScript中，apply、call和bind是三个用于控制this上下文的方法。
  一、call 方法
  call 方法调用一个函数，并显式指定函数内部的this指向的对象。后续参数会被传递给该函数。
    func.call(thisArg, arg1, arg2, ...);
    function greet(greeting) {
      console.log(`${greeting}, my name is ${this.name}`);
    }

    const person = { name: 'Alice' };
    greet.call(person, 'Hello'); // 输出: Hello, my name is Alice

  二、apply 方法
  apply 方法也调用一个函数，并显式指定this的值，但它接受一个数组作为参数，将数组中的元素作为函数的参数传递。
    func.apply(thisArg, [argsArray]);
    function introduce(greeting, age) {
      console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
    }

    const person = { name: 'Bob' };
    introduce.apply(person, ['Hi', 30]); // 输出: Hi, my name is Bob and I am 30 years old.

  三、bind 方法
  bind 方法创建一个新的函数，该函数在调用时将this绑定到指定的对象。与call和apply不同，bind不会立即执行函数，而是返回一个新的函数。
    const boundFunction = func.bind(thisArg[, arg1[, arg2[, ...]]]);
    function sayHello() {
      console.log(`Hello, my name is ${this.name}`);
    }

    const person = { name: 'Charlie' };
    const boundSayHello = sayHello.bind(person);
    boundSayHello(); // 输出: Hello, my name is Charlie

  四、总结
  1. call 方法：
    - 立即调用函数，并指定this的值，可以传递多个参数。
  2. apply 方法：
    - 立即调用函数，并指定this的值，参数以数组的形式传递。
  3. bind 方法：
    - 创建一个新的函数，并将this绑定到指定对象，返回的新函数可以在后续调用中使用。

  五、注意事项
  - call 和 apply 方法会立即执行函数，而 bind 方法返回一个新函数。
  - call 和 apply 方法的第一个参数都是用于指定this的对象。
  - 在使用这些方法时，要注意this的上下文，以避免错误。
   -->
</head>
<body>

  <script>
    // call 方法
    function introduce(greeting, age) {
      console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
    }
    const person1 = { name: 'Alice' };
    introduce.call(person1, 'Hi', 25); // 输出: Hi, my name is Alice and I am 25 years old.

    // apply 方法
    function introduce(greeting, age) {
      console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
    }
    const person2 = { name: 'Bob' };
    introduce.apply(person2, ['Hi', 30]); // 输出: Hi, my name is Bob and I am 30 years old.

    // bind 方法
    function introduce(greeting, age) {
      console.log(`${greeting}, my name is ${this.name} and I am ${age} years old.`);
    }
    const person3 = { name: 'Charlie' };
    const introduceWithGreeting = introduce.bind(person3, 'Hello');
    introduceWithGreeting(35); // 输出: Hello, my name is Charlie and I am 35 years old.
    
  </script>
  
</body>
</html>